<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title th:text="#{cas.inwebo.browserauthent.title}">Browser authentication</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main class="container mt-3 mb-3">
    <div layout:fragment="content" class="banner banner-message mdc-card card p-4 m-auto w-lg-66">
        <h2 th:utext="#{cas.inwebo.browser.heading}">Fill in your PIN code:</h2>
        <script src="https://ult-inwebo.com/neon/3.6.0/simple-neon-lib.js " type="text/javascript"></script>
        <form id="inweboErrorForm" method="POST">
            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
            <input type="hidden" name="_eventId" value="error"/>
        </form>
        <form id="enrollForm" method="POST">
            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
            <input type="hidden" name="_eventId" value="enroll"/>
        </form>
        <div id="otpError" class="banner banner-danger alert alert-danger banner-dismissible" style="display:none;">
            <p th:utext="#{cas.inwebo.browser.failure}">OTP generation error</p>
        </div>
        <script th:inline="javascript">
            /*<![CDATA[*/
            const casLogin = /*[[${login}]]*/ '';
            const siteAlias = /*[[${siteAlias}]]*/ '';
            const siteDescription = /*[[${siteDescription}]]*/ '';

            window.onload = () => {
                neon = new Neon.Neon(siteAlias, siteDescription);
                neon.initOnline()
                    .then(logins => {
                        if (logins.length === 0 || !logins.includes(casLogin)) {
                            $('#enrollForm').submit();
                        }
                        $('#otpForm').css('display', 'block');
                    })
                    .catch(e => $("#inweboErrorForm").submit());
            };

            function getOtp() {
                const pin = document.getElementById('pin').value;
                if (pin !== '') {
                    neon.getOnlineOtpWithPin(casLogin, pin)
                        .then(otp => {
                            document.getElementById('otp').value = otp;
                            $('#otpForm').submit();
                        }).catch(e => $("#otpError").css("display", "block"));
                }
                return false;
            }

            /*]]>*/
        </script>
        <div class="form-wrapper">
            <form id="otpForm" style="display:none;" method="POST">
                <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                <input type="hidden" name="_eventId" value="otp"/>
                <input type="hidden" id="otp" name="otp" value=""/>
                <section class="cas-field form-group my-3">
                    <label class="mdc-text-field mdc-text-field--outlined control-label">
                        <input class="mdc-text-field__input form-control"
                               id="pin"
                               name="pin"
                               size="6"
                               maxlength="6"
                               type="text"
                               autocomplete="off" required
                               autocapitalize="none"
                               spellcheck="false"/>
                        <span class="mdc-notched-outline">
                                    <span class="mdc-notched-outline__leading"></span>
                                    <span class="mdc-notched-outline__notch">
                                        <span class="mdc-floating-label"
                                              th:text="#{cas.inwebo.pin}">Activation Code</span>
                                    </span>
                                    <span class="mdc-notched-outline__trailing"></span>
                                </span>
                    </label>
                </section>
                <button class="mdc-button mdc-button--raised btn btn-primary" name="enroll"
                        type="button" onclick="getOtp()" value="Enroll"
                        id="browserLoginButton"
                        th:value="#{cas.inwebo.browser.button}">
                    <span class="mdc-button__label" th:text="#{cas.inwebo.browser.button}">Log in via the browser</span>
                </button>
            </form>
        </div>
    </div>
</main>
</body>
</html>
